<template>
  <el-dialog
    draggable
    overflow
    :title="titleMap[mode]"
    v-model="visible"
    :width="900"
    destroy-on-close
    @closed="$emit('closed')"
  >
    <sk-tabs type="border-card">
      <el-tab-pane ref="tab" label="信息">
        <el-form
          :model="form"
          :rules="rules"
          ref="dialogForm"
          label-width="70px"
          label-position="right"
        >
          <el-row>
            <el-col :span="17">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="编号" prop="code">
                    <el-input
                      label="编号"
                      v-model="form.code"
                      readonly
                      placeholder="自动生成"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="名称" prop="name">
                    <el-input v-model="form.name" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="全称" prop="fullname">
                    <el-input v-model="form.fullname" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="收货地址" prop="delivery_address">
                    <el-input v-model="form.delivery_address" clearable></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="信用额度" prop="credit_limit">
                    <el-input v-model="form.credit_limit" clearable></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="税率%" prop="tax_rate">
                    <el-input v-model="form.tax_rate" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="电话" prop="phone">
                    <el-input v-model="form.phone" clearable></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="传真" prop="fax">
                    <el-input v-model="form.fax" clearable></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="税号" prop="tax_code">
                    <el-input v-model="form.tax_code" clearable></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="开户行" prop="bank">
                    <el-input v-model="form.bank" clearable></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="账户" prop="account">
                    <el-input v-model="form.account" clearable></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="法人" prop="statutory_agent">
                    <el-input v-model="form.statutory_agent" clearable></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <el-form-item label="备注" prop="remark">
                    <el-input v-model="form.remark" clearable></el-input>
                  </el-form-item>
                </el-col> </el-row
            ></el-col>
            <el-col :span="7">
              <el-row>
                <el-col :span="24">
                  <el-form-item label="分组" prop="category_id">
                    <sk-select-group v-model="form.category_id" :list="categoryBuf" />
                  </el-form-item>
                </el-col>
                <el-col :span="20">
                  <el-form-item label="等级" prop="grade">
                    <skDicSelect
                      v-model="this.form.grade"
                      :code="'CompanyGrade'"
                    ></skDicSelect>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="业务员" prop="salesman_id">
                    <skAutoChoose
                      v-model="form.salesman.name"
                      :name="'user'"
                      :asKey="'salesman_id'"
                      :assign="form"
                    >
                    </skAutoChoose>
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <el-form-item label="理单" prop="employee_id">
                    <skAutoChoose
                      v-model="form.employee.name"
                      :name="'user'"
                      :asKey="'employee_id'"
                      :assign="form"
                    >
                    </skAutoChoose>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="交易单位" prop="trade_id">
                    <sk-select-group
                      v-model="form.trade_id"
                      :url="$API.basedata.trade.list"
                    ></sk-select-group>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="邮编" prop="postalcode">
                    <el-input v-model="form.postalcode" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="代理人" prop="entrusted_agent">
                    <el-input v-model="form.entrusted_agent" clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="联系人">
        <sc-VxeTable
          ref="save"
          :data="form.link_mans"
          :tablecode="'basedata_businessCompany_save'"
        >
        </sc-VxeTable>
      </el-tab-pane>
      <el-tab-pane label="开票抬头">
        <sc-VxeTable
          ref="save1"
          :data="form.billtrade"
          :tablecode="'basedata_businessCompany_save_billtrade'"
        >
        </sc-VxeTable>
      </el-tab-pane>
    </sk-tabs>

    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
    </template>
  </el-dialog>
</template>

<script>
//

import skDicSelect from "@/components/skDicSelect";
import skUnitSelect from "@/components/skUnitSelect";
import skAutoChoose from "@/components/skAutoChoose";
import skSelectGroup from "@/components/skSelectGroup";
export default {
  emits: ["success", "closed", "update:modeValue"],
  components: {
    skSelectGroup,
    skDicSelect,
    skUnitSelect,
    skAutoChoose,
  },
  data() {
    return {
      mode: "add",
      gridOps: {
        proxyConfig: null,
      },
      titleMap: {
        add: "新增往来",
        edit: "编辑往来",
      },

      category: [],
      categoryBuf: [],
      form: {
        id: "",
        category_id: "",
        code: "",
        billtrade: [],
        name: "",
        link_mans: [],
        employee: { name: "" },
        salesman: { name: "" },
        remark: "",
      },
      rules: {
        name: [{ required: true, message: "请输入名称" }],
        category_id: [{ required: true, message: "请选择分组" }],
        phone: [{ required: true, message: "号码必填" }],
      },
      visible: false,
      isSaveing: false,
    };
  },
  mounted() {
    this.getCateGory();
  },
  methods: {
    //显示
    close() {
      this.visible = false;
      this.$emit("update:modeValue", false);
      this.$emit("closed");
    },
    open(mode = "add") {
      this.mode = mode;
      this.visible = true;

      return this;
    },

    async getCateGory(query = "") {
      if (this.category == "") {
        this.category = await this.$API.basedata.businessCompany.category.list.get(query);
      }
      this.categoryBuf = this.category.data.filter(item => {
        return item.name.toLowerCase().includes(query.toLowerCase());
      });
    },
    //表单提交方法
    submit() {
      this.$refs.dialogForm.validate(async valid => {
        if (valid) {
          this.isSaveing = true;

          var res = await this.$API.basedata.businessCompany.save.post(this.form);
          this.isSaveing = false;
          if (res.code == 200) {
            this.$emit("success", this.form, this.mode);
            this.visible = false;
            this.$message.success("操作成功");
          } else {
            this.$alert(res.message, "提示", { type: "error" });
          }
        }
      });
    },
    //表单注入数据
    setData(data) {
      if (data.salesman == null) delete data.salesman;
      if (data.employee == null) delete data.employee;

      Object.assign(this.form, data);
    },
  },
};
</script>

<style></style>
